<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        button {
            width: 100px;
        }

        input {
            border: none;
            height: 25px;
        }
    </style>
</head>

<body>
    <table border="1" id="table">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody">
            <tr index="0">
                <td><input type="text" value=""></td>
                <td><input type="text" value=""></td>
                <td><input type="number" value=""></td>
                <td>
                    <button class="btnDel" index="0">删除</button>
                    <button class="btnEdit">编辑/保存</button>
                </td>
            </tr>
            <tr id="lastTr">
                <td colspan="4">
                    <button style="width: 100%;height:25px" id="btnNew">+</button>
                </td>
            </tr>
        </tbody>
    </table>

    <p id="pJson">JSON展示数据</p>

    <script>
        // 表格数据
        var arr = [{ id: "0" }]

        /* 将表格数据以JSON形式展示 */
        function showDataJson() {
            pJson.innerText = JSON.stringify(arr)
        }
        showDataJson()

        /*
        使用事件委托来书写表格【√】
        ·有录入功能（用户输入姓名、性别、年龄，点击添加按钮，数据自动录入表格）
        ·有删除功能        
         */

        /* 添加一行 */
        btnNew.addEventListener(
            "click",
            function (e) {
                // 造出一个tr
                var tr = document.createElement("tr")

                // 立刻暗藏index属性于改行
                tr.setAttribute("index", tbody.children.length - 1)

                // 给当前行设置html
                tr.innerHTML = `
                <td><input type="text" value=""></td>
                <td><input type="text" value=""></td>
                <td><input type="number" value=""></td>
                <td>
                    <button class="btnDel" index="${tbody.children.length - 1}">删除</button>
                    <button class="btnEdit">编辑/保存</button>
                </td>
                `

                // 新增一条对应数据 id与tr的index对应
                arr.push({ id: (tbody.children.length - 1) + "" })

                // 插入当前tr 
                tbody.insertBefore(tr, lastTr)

                // 立刻展示数据
                showDataJson()
            }
        )

        /* 将编辑与删除逻辑委托给tbody父元素 */
        tbody.addEventListener(
            "click",
            function (e) {

                /* 编辑/保存按钮 */
                if (e.target.classList.contains("btnEdit")) {

                    // 找到当前行
                    var tr = e.target.parentNode.parentNode

                    // 找出当前行内的所有input
                    var ips = tr.querySelectorAll("input")

                    // 让当前行的所有input都切换disabled属性（无则加之 有则删之）
                    ips.forEach(
                        function (ip, index) {
                            ip.toggleAttribute("disabled")
                        }
                    )

                    // console.log(ips[0].getAttribute("disabled") === "");

                    // 如果input是不可用的 代表本次点击是想保存数据
                    if (ips[0].getAttribute("disabled") != null) {
                        console.log("保存数据...");

                        for (var i = 0; i < arr.length; i++) {
                            console.log(i, arr[i].id, tr.getAttribute("index"));

                            if (arr[i].id === tr.getAttribute("index")) {
                                arr[i].name = ips[0].value
                                arr[i].gender = ips[1].value
                                arr[i].age = ips[2].value * 1
                                console.log("数据已修改");

                                showDataJson()
                                break
                            }
                        }

                    }

                }

                /* 删除按钮 */
                if (e.target.classList.contains("btnDel")) {

                    // 删除当前tr
                    var tr = e.target.parentNode.parentNode
                    tr.remove()

                    // 删除数据
                    for (var i = 0; i < arr.length; i++) {
                        if (arr[i].id === tr.getAttribute("index")) {
                            // 从arr中干掉第i条数据
                            arr.splice(i, 1)
                            showDataJson()
                            break
                        }
                    }                    
                }
            }
        )
    
    </script>
</body>

</html>